<template>
    <page-header-wrapper>
        <div class="split-page">
            <div class="f1">
                <a-card :bordered="false">
                    <div>
                        <a-button type="primary" @click="showView=true">新增</a-button>
                    </div>
                    <a-table :columns="columns" rowKey="id" :data-source="list" style="margin-top: 20px">
                        <div slot="action" slot-scope="text, record">
                            <a style="margin-right:10px">编辑</a>
                            <a style="margin-right:10px" @click="yulancaidan(record)">预览</a>
                            <a style="margin-right:10px">删除</a>
                        </div>
                    </a-table>
                </a-card>
            </div>
            <div style="width: 380px; margin-left: 24px" v-if="showView">
                <a-card :bordered="false" title="角色菜单效果预览">
                    <!-- <a-directory-tree default-expand-all @select="onSelect" @expand="onExpand">
                        <a-tree-node key="0" title="首页" is-leaf />
                        <a-tree-node key="1" title="用户管理" is-leaf />
                        <a-tree-node key="2" title="权限管理">
                            <a-tree-node key="0-0-0" title="角色管理" is-leaf />
                            <a-tree-node key="0-0-1" title="菜单管理" is-leaf />
                        </a-tree-node>
                        <a-tree-node key="3" title="账号设置">
                            <a-tree-node key="0-1-0" title="身份认证" is-leaf />
                            <a-tree-node key="0-1-1" title="登录密码" is-leaf />
                        </a-tree-node>
                    </a-directory-tree> -->
                </a-card>
            </div>
        </div>
    </page-header-wrapper>
</template>

<script>
export default {
    data () {
        return {
            showView: false,
            columns: [
                { title: '角色名称', dataIndex: 'name' },
                { title: '角色编码', dataIndex: 'code' },
                { title: '备注', dataIndex: 'mark' },
                { title: '创建日期', dataIndex: 'creat_time' },
                { title: '更新日期', dataIndex: 'update_time' },
                { title: '操作', scopedSlots: { customRender: 'action' } }
            ],
            list: [
                {
                    id: 1,
                    name: '项目理员',
                    code: 'admin',
                    mark: 'xxxxx',
                    creat_time: '20180908',
                    update_time: '20200708'
                }
            ]
        }
    },
    methods: {
        onSelect () {},
        yulancaidan (item) {
            this.showView = !this.showView
        }
    }
}
</script>
